【JavaScript】代入演算子と複合代入演算子 - 再代入と省略形

JavaScriptの代入演算子をご紹介します。

検証環境

JavaScript -

macOS

14.1

代入演算子

代入演算子（=）は“変数に値を代入（記憶）します。”

変数 = 値

sample.js

___ih_hl_start
let num = 3;
___ih_hl_end

console.log(num);

Console

このサンプルは変数numに数値3を代入しています。

再代入は“１度代入した変数に再度、値を代入すること”です。

sample.js

let num = 3;
___ih_hl_start
num = 8;
___ih_hl_end

console.log(num);

Console

１行目で3を代入していますが、２行目で8を再代入したため、４行目の出力によってコンソールに8が表示されます。

複合代入演算子は“代入演算子とその他の演算を組み合わせた演算子”です。

主にソースコードを簡潔に記述するために使用します。

例えば、次のコードをご覧ください。

Code

let num = 3;
___ih_hl_start
num = num + 8;
___ih_hl_end

console.log(num);

Console

２行目で左右のオペランドに変数numを使用しています。

代入演算子によって、左オペランドの変数numに右オペランドのnum + 8の計算結果を記憶します。

このソースコードを複合代入演算子で書き換えると次のようになります。

sample.js

let num = 3;
___ih_diff_start
-num = num + 8;
+num += 8;
___ih_diff_end

console.log(num);

Console

２行目の+=が複合代入演算子です。

この演算子は左オペランドの変数の値に右オペランドの値を加算し、その結果を左オペランドの変数に代入します。

複合代入演算子を使った場合と使わない場合を比べると簡潔的なソースコードになったことが分かります。

代表的な複合代入演算子は次の４つです。

演算子	演算内容	例
+=	左オペランドの変数の値に右オペランドの値を加算した結果を左オペランドの変数に代入する	`num += 8`
-=	左オペランドの変数の値から右オペランドの値を減算した結果を左オペランドの変数に代入する	`num -= 8`
*=	左オペランドの変数の値に右オペランドの値を乗算した結果を左オペランドの変数に代入する	`num *= 8`
/=	左オペランドの変数の値を右オペランドの値で除算した結果を左オペランドの変数に代入する	`num /= 8`

sample.js

let num = 5;
___ih_hl_start
num += 4;
___ih_hl_end

console.log(num);

Console

sample.js

let num = 5;
___ih_hl_start
num -= 4;
___ih_hl_end

console.log(num);

Console

sample.js

let num = 5;
___ih_hl_start
num *= 4;
___ih_hl_end

console.log(num);

Console

sample.js

let num = 5;
___ih_hl_start
num /= 4;
___ih_hl_end

console.log(num);

Console

1.25